<template>
  <div class="L_two" id="L_two">
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: '',
  data() {
    return {
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const echart = echarts.init(document.getElementById('L_two'))

      var option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 图例（如果有多个系列可配置）

        // 网格
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        // X轴
        xAxis: [
          {
            type: 'category',
            data: ['支架1', '支架2', '支架3', '支架4', '支架5'],
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            },
            axisTick: {
              show: false // 设置为false隐藏刻度线
            },
            axisLabel: {
              color: '#D8D8D9'
            }
          }
        ],
        // Y轴
        yAxis: [
          {
            type: 'value',
            name: '单位:个',
            nameTextStyle: {
              color: '#41DCE5'
            },
            axisLine: {
              lineStyle: {
                color: '#D8D8D9'
              }
            },
            axisLabel: {
              color: '#D8D8D9'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            }
          }
        ],
        // 系列（柱状图数据及样式）
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [9, 15, 21, 25, 28],
            barWidth: '40%',
            itemStyle: {
              // 柱子渐变色
              color: function (params) {
                var colorList = [
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#0EBCF4 '
                  }, {
                    offset: 1, color: '#000C2F '
                  }]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#237CF1 '
                  }, {
                    offset: 1, color: '#000C2F '
                  }]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#470CEB '
                  }, {
                    offset: 1, color: '#000C2F '
                  }]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#CC44BC '
                  }, {
                    offset: 1, color: '#000C2F '
                  }]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#FF008C '
                  }, {
                    offset: 1, color: '#000C2F '
                  }])
                ];
                return colorList[params.dataIndex];
              }
            }
          }
        ]
      };


      echart.setOption(option)
    }
  },
}
</script>
<style lang="less" scoped>
.L_two {
  width: 100%;
  height: 100%;
}
</style>
